<template>
  <div class="wrap">
    <h2 class="title">历史搜索</h2>
    <ul class="list" v-if="historys.length">
      <li class="list-item"
        v-for="item in historys"
        :key="item.timestamp"
        @click="onHistoryClick(item.value)"
      >
        <i class="fa fa-history"></i> {{ item.value }}
      </li>
    </ul>
    <div class="action" v-if="historys.length">
      <span @click="onHistoryClear">清除历史记录</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  props: {
    historys: {
      type: Array
    }
  },
  methods: {
    onHistoryClick (value) {
      this.$emit('select', value)
    },
    onHistoryClear () {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    display: flex;
    flex-direction: column;
    border-top: rem(10px) solid $color-grey;
    color: $color-text-secondary;
    font-size: rem(14px);
    .title{
      display: flex;
      align-items: center;
      font-size: rem(14px);
      font-weight: 500;
      margin: 0;
      color: $color-text-secondary;
      height: rem(46px);
      padding-left: rem(10px);
    }
    .list{
      padding-left: rem(10px);
      &-item{
        display: flex;
        align-items: center;
        height: rem(44px);
        @include border1px(#ccc, 0 0 1px);
        color: $color-text-regular;
        .fa{
          color: $color-text-secondary;
          margin-right: rem(5px);
        }
      }
    }
    .action{
      display: flex;
      align-items: center;
      justify-content: center;
      height: rem(46px);
    }
  }
</style>
